<template>
  <div class="setter">
    <Tooltip content="系统设置" placement="bottom">
      <Icon type="ios-color-palette" @click="show=true" :size="23"/>
    </Tooltip>

    <Drawer title="系统设置" v-model="show" width="300" :closable="true">
      <div class="setter-section">
        <div class="setter-section-title">主题</div>
        <div>
          <Tooltip content="钻兰" placement="bottom">
            <Checkbox size="large" v-model="single1"></Checkbox>
          </Tooltip>
          <Tooltip content="极黑" placement="bottom">
            <Checkbox size="large" v-model="single2"></Checkbox>
          </Tooltip>
          <Tooltip content="果绿" placement="bottom">
            <Checkbox size="large" v-model="single3"></Checkbox>
          </Tooltip>
          <Tooltip content="酱紫" placement="bottom">
            <Checkbox size="large" v-model="single4"></Checkbox>
          </Tooltip>
        </div>
      </div>
      <p>Some contents...</p>
    </Drawer>
  </div>
</template>

<script>
  export default {
    name: "theme",
    data(){
      return {
        show: true,
        single1: false,
        single2: false,
        single3: false,
        single4: false,
      }
    }
  }
</script>

<style scoped lang="less">
  .setter{
    margin-right: 10px;
    cursor: pointer;
    &-section{
      padding: 20px 10px;
      &-title{
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 10px;
      }
    }
  }
</style>
